<template>
	<view class="page-content">
		<u-list v-if="dataList.length" :customStyle="{
			flex:'1',
			marginBottom: '20rpx',
			marginTop: '20rpx',
			backgroundColor:'#fff',
			boxSizing: 'border-box', paddingLeft:'20rpx', paddingRight:'20rpx', 
			}" height="0px">

			<view v-for="(item, index) in dataList" :key="index">
				<view class="display_row_btn_center itemBox">
					<view style="margin-right: 20rpx;font-weight: bold;">{{index+1}}</view>
					<u-image :src="item.userInfo?item.userInfo.headimg:''" width="80rpx" height="80rpx"></u-image>
					<view style="flex: 1;margin-left: 10rpx;" class="ainfoBox">
						<text class="c_333333 f_30">{{item.userInfo?item.userInfo.username:''}}</text>
						<text class="c_999999 f_24">{{item.userInfo?item.userInfo.vip_name:''}}</text>
					</view>
					<view class="ainfoBox" style="justify-content: center;align-items: center;">
						<text class="c_C62B2C f_34" style="font-weight: bold;">￥{{item.aamount}}</text>
					</view>
				</view>
				<u-line direction="row" color="#999999"></u-line>
			</view>

		</u-list>
		<u-empty mode="list" v-else :customStyle="{flex:'1'}"></u-empty>
	</view>
</template>

<script>
	import {
		getRanks
	} from '@/config/api.js'

	export default {
		data() {
			return {
				dataList: []
			}
		},
		onLoad() {
			this.getRank();
		},
		methods: {
			getRank() {
				getRanks().then(res => {
					this.dataList = res;
				})
			}
		}
	}
</script>

<style scoped>
	.ainfoBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 80rpx;
		align-items: flex-start;
	}

	.itemBox {
		padding: 20rpx 0px;
	}
</style>
